<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <script src="../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css">
    <script src="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <link href="../../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <script src="../../plugins/waves-0.7.5/waves.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="../../plugins/jquery-confirm/jquery-confirm.min.css">
    <script src="../../plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="../../css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.exedit.js"></script>
    <link rel="stylesheet" href="../../plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">

    <script src="../../js/common.js"></script>
    <style>
        #main{padding:1% 2% 2%;background-color:#f5f5f5;}
        .form-group{padding: 10px 20px 0 20px}
    </style>
</head>
<body>
<div id="main" >
    <div id="toolbar" class="btn-group">
        <shiro:hasPermission name="notice:add"><button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal1" >
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增公告
        </button></shiro:hasPermission>
        <shiro:hasPermission name="notice:update">
            <button id="btn_edit" type="button" class="btn btn-default" onclick="updateAction()" >
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑公告
            </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="notice:delete">
            <button id="btn_delete" type="button" class="btn btn-default" onclick="deleteAction()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除公告
            </button>
        </shiro:hasPermission>
    </div>
    <!-- 新增模态框（Modal）-->
    <div class="modal fade" id="addModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        <strong>新增公告</strong>
                    </h4>
                </div>
                    <div class="form-group">
                        <label for="addTitle">标题</label>
                        <input id="addTitle" type="text" class="form-control" name="addTitle" maxlength="20">
                    </div>
                    <div class="form-group">
                        <label for="addContent">内容</label>
                        <input id="addContent" type="text" class="form-control" name="addContent" maxlength="300">
                    </div>
                    <div class="form-group">
                        <label >状态</label>
                        <div class="radio">
                            <div class="radio radio-inline radio-success">
                                <input id="addStatus_0" type="radio" name="addStatus" value="RELEASE" checked>
                                <label for="addStatus_0">发布</label>
                            </div>
                            <div class="radio radio-inline">
                                <input id="addStatus_1" type="radio" name="addStatus" value="NOT_RELEASE">
                                <label for="addStatus_1">未发布</label>
                            </div>
                        </div>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button id="createNoticeBtn" type="button" class="btn btn-primary">
                        确定新增
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 编辑模态框（Modal）-->
    <div class="modal fade" id="updateModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        <strong>编辑用户</strong>
                    </h4>
                </div>
                <div class="modal-body">
                    <label id="updateId" value="" style="display:none"></label>
                    <div class="form-group">
                        <label for="updateTitle">标题</label>
                        <input id="updateTitle" type="text" class="form-control" name="updateTitle" maxlength="20" value="">
                    </div>
                    <div class="form-group">
                        <label for="updateContent">内容</label>
                        <input id="updateContent" type="text" class="form-control" name="updateContent" maxlength="300" value="">
                    </div>
                    <div class="form-group">
                        <label >状态</label>
                        <div class="radio">
                            <div class="radio radio-inline radio-success">
                                <input id="updateStatus_0" type="radio" name="updateStatus" value="RELEASE">
                                <label for="updateStatus_0">发布 </label>
                            </div>
                            <div class="radio radio-inline">
                                <input id="updateStatus_1" type="radio" name="updateStatus" value="NOT_RELEASE">
                                <label for="updateStatus_1">未发布 </label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button id="updateNoticeBtn" type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <table id="table" style="font-size: 14px;"></table>
</div>

<script>
    $('#table').bootstrapTable({
        url: '${basePath}/notice/list',
        height:getHeight(),
        striped: true, // 是否显示行间隔色
        search: true,
        showRefresh: true,
        showColumns: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        // detailView: true,
        paginationLoop: false,
        sidePagination: 'server',
        silentSort: false,
        smartDisplay: false,
        escape: true,
        searchOnEnterKey: true,
        detailFormatter: 'detailFormatter',
        toolbar: "#toolbar",
        uniqueId: "id",
        pageSize: "10",
        pagination: true, // 是否分页
        sortable: true, // 是否启用排序
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        columns: [
            {field: 'ck', checkbox: true,width:70},
            {field: 'id',title: '编号',align:'center'},
            {field: 'title',title: '标题',align: 'center'},
            {field: 'content',title: '内容',align: 'center'},
            {field: 'status',title: '状态',align:'center'},
            {field: 'operation',title: '操作',width:200,align: 'center',valign: 'middle',formatter: actionFormatter, clickToSelect: false},
        ]
    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {
        return [
            '<a href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-primary btn-update" style="background-color: grey;"><i class="glyphicon glyphicon-edit"></i>编辑</a>',
            '&nbsp; <a href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove" class="btn btn-xs btn-danger btn-remove"  style="background-color: black;"><i class="glyphicon glyphicon-remove"></i>删除</a>'
            // '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            // '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }

//新增
$(function () {
    $("#createNoticeBtn").click(function () {
        var addStatus = $('input:radio[name="addStatus"]:checked').val();
        var addTitle = $("#addTitle").val();
        var addContent = $("#addContent").val();

        var role = {status:addStatus,title:addTitle,content:addContent}
        $.ajax({
            url:'${basePath}/notice/create',
            type:"post",
            dataType:'json',
            data:role,
            success:function (result) {
                if (result.result == "success"){
                    $('#addModal1').modal('hide');
                    $("#table").bootstrapTable('refresh');
                }else{
                    alert("fail");
                }
            }
        })
    })
})

// 编辑
function updateAction() {
    var rows = $('#table').bootstrapTable('getSelections');
    if (rows.length != 1) {
        $.confirm({
            type: 'blue',
            title: false,
            content: '请选择一条记录！',
            autoClose: 'cancel|3000',
            backgroundDismiss: true,
            buttons: {
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    } else {
        // alert(rows[0].ck+rows[0].id+rows[0].name+rows[0].title+rows[0].description+rows[0].available+rows[0].operation);
        $("#updateTitle").val(rows[0].title);
        $("#updateContent").val(rows[0].content);
        var  updateAvailable = rows[0].status;
        if(updateAvailable == 'RELEASE'){
            $("#updateStatus_0").prop("checked", true);
        }else if(updateAvailable == 'NOT_RELEASE'){
            $('#updateStatus_1').prop("checked", true);
        }
        $('#updateModal1').modal('show');

        $("#updateNoticeBtn").off("click").on("click",function(){
            var updateId = rows[0].id;
            var updateTitle = $("#updateTitle").val();
            var updateContent = $("#updateContent").val();
            var updateAvailable = $('input:radio[name="updateStatus"]:checked').val();
            var role = {id:updateId,status:updateAvailable,title:updateTitle,content:updateContent}
            $.ajax({
                url:'${basePath}/notice/update',
                type:"post",
                dataType:'json',
                data:role,
                success:function (result) {
                    if (result.result == "success"){
                        $('#updateModal1').modal('hide');
                        $("#table").bootstrapTable('refresh');
                    }else{
                        alert("fail");
                    }
                }
            })
        })
    }
}

// 删除
var deleteDialog;
function deleteAction() {
    var rows = $('#table').bootstrapTable('getSelections');
    if (rows.length == 0) {
        $.confirm({
            type: 'blue',
            title: false,
            content: '请至少选择一条记录！',
            autoClose: 'cancel|3000',
            backgroundDismiss: true,
            buttons: {
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    } else {
        deleteDialog = $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除该角色吗？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        var ids = new Array();
                        for (var i in rows) {
                            ids.push(rows[i].id);
                        }
                        $.ajax({
                            type: 'get',
                            url: '${basePath}/notice/delete/' + ids,
                            success: function(result) {
                                if (result.result != 'success') {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: '删除失败',
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                } else {
                                    $.confirm({
                                        theme: 'dark',
                                        animation: 'rotateX',
                                        closeAnimation: 'rotateX',
                                        title: false,
                                        content: '删除成功',
                                        buttons: {
                                            confirm: {
                                                text: '确认',
                                                btnClass: 'waves-effect waves-button waves-light'
                                            }
                                        }
                                    });
                                    $('#table').bootstrapTable('refresh');
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: textStatus,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }
}
</script>
</body>

</html>